<template>
  <su-popup
    :show="state.show"
    @close="onCancel"
    :type="'center'"
    round="10"
  >
    <view class="content-box">
      <view class="header-title">请选择您的让利比例：</view>
      <view class="form-box">
        <uni-forms
          ref="formRef"
          :modelValue="state.form"
          :rules="rules"
          label-width="130"
        >
          <uni-forms-item
            label="让利比例"
            name="type"
          >
            <view class="form-box-input-item">
              <radio-group
                disabled
                @change="changeRadio"
                class="ss-flex flex-wrap font-1"
              >
                <label
                  class="uni-list-cell uni-list-cell-pd ss-flex ss-m-l-10"
                  v-for="(item) in radioList"
                  :key="item.value"
                >
                  <radio
                    color="#003288"
                    :disabled="item.value==state.params.discount"
                    style="transform: scale(0.6)"
                    :value="item.value"
                    :checked="state.form.discount == item.value"
                  />
                  <view
                    class="font-2"
                    style="color:#616060"
                  >{{item.label}}</view>
                </label>
              </radio-group>
            </view>
          </uni-forms-item>
        </uni-forms>
      </view>
      <view class="ss-flex ss-m-t-20  flex-box">
        <view
          class="btn-styleOne btn-box"
          @click="onCancel"
        >关闭</view>
        <view
          v-if="state.form.discount!=state.params.discount"
          class="btn-style btn-box"
          @click="climCli"
        >确认</view>
      </view>
    </view>
  </su-popup>
</template>

<script setup>
import sheep from '@/sheep';
import {
  computed,
  reactive,
  onMounted,
  inject,
  ref,
  watch
} from 'vue';
	import commissionAPI from "@/ygb/api/commission"
const emits = defineEmits(['submit'])
const radioList = [
  { value: 0, label: '0%' },
  { value: 15, label: '15%' },
  { value: 20, label: '20%' },
]
const state = reactive({
  show: false,
  form: {
    discount: 15
  },
  params: {
    discount: 0
  },
  btnShow: false
})
const climCli = () => {
  commissionAPI.saveDiscount({
    discount: state.form.discount
  }, state.params.id).then(res => {
    if (res.error == 0) {
      uni.showToast({
        title: '修改成功',
        icon: 'none',
        duration: 2000
      })
      onCancel()
    } else if (res.error == 1) {
      uni.showToast({
        title: res.msg,
        icon: 'none',
        duration: 2000
      })
    } else if (res.error == 2) {
      uni.showToast({
        title: '修改成功',
        icon: 'none',
        duration: 2000
      })
      onCancel()
      emits('submit', res.data);
    } else {
      uni.showToast({
        title: res.error,
        icon: 'none',
        duration: 2000
      })
    }
  })
}
const open = (item) => {
  state.show = true;
  state.params = item
  state.form.discount = item.discount
}
const changeRadio = (e) => {
  state.form.discount = e.detail.value
}
const onCancel = () => {
  state.show = false
}
defineExpose({
  open,
});

</script>

<style lang="scss" scoped>
.flex-box {
  justify-content: center;
  gap: 40rpx;
}
.btn-box {
  width: 240rpx;
  height: 85rpx;
  font-size: 36rpx;
  border-radius: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-style {
  background: #3662ec;
}
.btn-styleOne {
  border: 1px solid #b9b9b9;
}

.form-box-input-item {
  margin-top: 10rpx;
}
::v-deep .label-text {
  font-size: 30rpx !important;
  font-weight: 500 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  color: #202020 !important;
}
.content-box {
  width: 560rpx;
  height: 300rpx;
  padding: 36rpx 32rpx;
  // box-sizing: border-box;
  .header-title {
    font-size: 30rpx;
    font-weight: 500;
    line-height: normal;
    letter-spacing: normal;
    color: #202020;
  }
  .form-box {
    margin-top: 34rpx;
  }
}
</style>